<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="searchForm.column" class="filter-item" style="width: 130px;" clearable :loading="listLoading" placeholder="统计类型：">
        <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchForm.sid" class="filter-item" style="width: 110px;" clearable filterable :loading="loading" placeholder="选择区服">
        <el-option
          v-for="item in serverList"
          :key="item.sid"
          :label="item.name+'('+item.sid+')'"
          :value="item.sid"
        >
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button v-if="checkPermission(permissionRoles.distribution_realtime_download)" :loading="downloadLoading" type="primary" icon="el-icon-download" class="filter-item" @click="handleDownload()">导出</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" :style="{height: '780px'}" class="mt-10" border height="780">
      <el-table-column label="等级" prop="level" width="79px" align="center"></el-table-column>
      <el-table-column label="停留人数" prop="num" width="80px" align="center"></el-table-column>
      <el-table-column label="人数占比" prop="ratio" width="80px" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getDistributionRealtimeList } from '@/api/statis'
import checkPermission from '@/utils/permission'
import { getServerList } from '@/api/ops'

export default {
  name: 'RealtimeVip',
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      list: [],
      types: [
        { id: 'lv', name: '等级' },
        { id: 'vip_level', name: 'vip' },
        { id: 'main_task_id', name: '主线任务' },
        { id: 'explore_level_id', name: '海底关卡' },
        { id: 'relic_level_id', name: '遗迹关卡' },
        { id: 'underground_explore', name: '地心勘探' },
        { id: 'hero_num', name: '英雄人数' },
        { id: 'red_hero_num', name: '红色英雄人数' }
      ],
      serverList: [],
      loading: false,
      listLoading: false,
      downloadLoading: false,
      searchForm: {
        column: 'lv',
        sid: []
      }
    }
  },
  created() {
    this.getServerList()
  },
  methods: {
    checkPermission,
    handleFilter() {
      this.getList()
    },
    async getServerList(params) {
      const query = params
      const res = await getServerList(query)
      this.serverList = res.data.items
      this.loading = false
    },
    async getList() {
      this.listLoading = true
      const res = await getDistributionRealtimeList(this.searchForm)
      this.listLoading = false
      this.list = res.data
    },
    handleDownload() {
      this.downloadLoading = true
      const type_data = this.types.find(item => item.id === this.searchForm.column)
      const filename = '实时' + (type_data ? type_data.name : '未知类型')
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['等级', '停留人数', '人数占比']
        const filterVal = ['level', 'num', 'ratio']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: filename
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>
